<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #left,#attach,#content{
            position: fixed;
            top:50%;
            left:50%;
            border:solid 1px;
        }
        #left{
            margin-top:-400px;
            margin-left:-800px;
            background-color: aquamarine;
            width: 150px;
            height: 400px;

        }
        #attach{
            margin-top: -300px;

            background-color: #2343b1;
            width: 30px;
            height: 151px;
        }
        .attach_a{
            margin-left: -630px;
        }
        .attach_b{
            margin-left: -780px;
        }
        #content{
             margin-top: -400px;

             height: 1000px;
             background-color: red;
         }
        .content_a{
            width:800px;
            margin-left: -600px;
        }
        .content_b{
            width:950px;
            margin-left: -750px;
        }


    </style>
</head>
<body>

<div id="left" ></div>

<div id="attach" ><<隐藏菜单栏</div>
<div id="content"  ></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>
<script>
    var showOrHide=false;
    $(function(){
        $("#content").addClass("content_a");
        $("#attach").addClass("attach_a");
        $("#attach").click(function(){
            if(showOrHide==false){
                $(this).html(">>显示菜单栏");
                $("#left").toggle();
                $("#content").removeClass("content_a").addClass("content_b");
                $("#attach").removeClass("attach_a").addClass("attach_b");
                showOrHide=true;

            }else{
                $(this).html("<<显示菜单栏");
                $("#left").toggle();
                $("#content").removeClass("content_b").addClass("content_a");
                $("#attach").removeClass("attach_b").addClass("attach_a");
                showOrHide=false;
            }
        })


    })
</script>